<template>
	<section class="brs-page">
		<div class="brs-page-title" v-if="props.title">{{ props.title }}</div>
		<div class="brs-page-main">
			<slot></slot>
		</div>
	</section>
</template>

<script lang="ts" setup>
	const props = defineProps({
		title: {
			type: String,
			default: '',
		},
	});
</script>

<style lang="less" scoped>
	.brs-page {
		padding: 10px 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		&-title {
			font-size: 18px;
			font-weight: 600;
			padding-bottom: 10px;
			border-bottom: 1px solid #eee;
			margin: 0 10px 20px 10px;
		}
		&-main {
			flex: 1;
			overflow: auto;
			padding: 0 10px;
		}
	}
</style>
